<template>
    <div id="view">
        <el-container>
            <el-header>
                <div class="logo">
                    <img src="@/assets/IMAGES/kj-logo.png" alt="" />
                </div>
                <!--标题-->
                <div class="screen-title">
                    <h3>集团数据监控</h3>
                    <p>{{ currentTime }}</p>
                </div>
            </el-header>
            <el-main>
                <el-row>
                    <el-col :span="6">
                        <div class="box-card ">
                            <div class="clearfix">
                                <span class="title">会员</span>
                                <span class="vip-num num">125484</span>
                                <el-dropdown class="gender-down" @command="handleCommand">
                                    <span class="el-dropdown-link">
                                        {{genderValue}}<i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="全部">全部</el-dropdown-item>
                                        <el-dropdown-item command="30岁以下">30岁以下</el-dropdown-item>
                                        <el-dropdown-item command="30-39岁">30-39岁</el-dropdown-item>
                                        <el-dropdown-item command="40-49岁">40-49岁</el-dropdown-item>
                                        <el-dropdown-item command="50-59岁">50-59岁</el-dropdown-item>
                                        <el-dropdown-item command="60-69岁">60-69岁</el-dropdown-item>
                                        <el-dropdown-item command="70岁以上">70岁以上</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>

                            <div id="gender-pie">

                            </div>
                            <div id="source-bar">

                            </div>
                        </div>

                    </el-col>
                    <el-col :span="12">
                        <el-button type="text" v-if="isShowAll" class="btn" @click="selectAll()">全国
                        </el-button>
                        <!--地图-->
                        <div id="map-chart"></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="menu-box clearfix">
                            <div class="menu-list" v-for="(ite, inde) in menu" :key="inde" @click="selectMenu(ite)">
                                <div class="menu-logo">
                                    <img :src="ite.src" alt="" />
                                </div>
                                <div class="title">
                                    <h3>{{ ite.title }}</h3>
                                </div>
                            </div>
                        </div>

                        <div class="box-card order">
                            <div class="clearfix">
                                <span class="title">订单</span>
                                <span style="float:right">金额：<i class="num">124545元</i></span>
                                <span style="float:right;margin-right:12px">总数：<i class="num">124545</i></span>

                            </div>
                            <div id="order-bar"></div>
                            <!-- <div id="order-top"></div> -->
                            <div class="clearfix">
                                <span class="title">Top5</span>
                            </div>
                            <!-- <ul>
                                <li>杭州康久医疗投资管理有限公司 3000万</li>
                                <li>杭州康久天颐养老院 2500万</li>
                                <li>杭州拱墅康久天颐护理院 1800万</li>
                                <li>杭州市拱墅区祥符街道庆隆社区康久天颐养老园 1200万</li>
                                <li>嘉兴康久中医院有限公司 1000万</li>
                            </ul> -->
                            <div id="top"></div>

                        </div>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>
                <el-row>
                    <el-col :span="12">
                        <div class="box-card">
                            <div class="clearfix">
                                <span class="title">机构</span>
                                <span style="float:right;font-weight: bold;">服务人次：<i class="num">124582</i></span>
                                <span style="float:right;margin-right:12px;font-weight: bold;">总数：<i
                                        class="num">21</i></span>
                            </div>
                            <div class="organization-info">
                                <div id="type-num"></div>
                                <div id="area-num"></div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="box-card">
                            <div class="clearfix">
                                <span class="title">员工</span>
                                <span style="float:right;" class="title">人数：<i class="num">124545</i></span>
                            </div>
                            <div class="user-info">
                                <div id="post"></div>
                                <div id="construction"></div>
                                <div id="grade"></div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
        <!--对话框-->
        <el-dialog title="云养老" :visible.sync="dialogVisible">
            <el-button type="primary" plain class="select-btn" v-for="(item,index) in ylyData" :key="index"
                @click="jumpPage(item.value)">{{item.title}}
            </el-button>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios';
import DigitRoll from "@huoyu/vue-digitroll";
//地图数据
import chinaJson from "@/assets/REGION/china.json";
import anhuiJson from "@/assets/REGION/anhui.json";
import ningxiaJson from "@/assets/REGION/ningxia.json";
import shanghaiJson from "@/assets/REGION/shanghai.json";
import zhejiangJson from "@/assets/REGION/zhejiang.json";
import sichuanJson from '@/assets/REGION/sichuan.json';

import * as echarts from "echarts/core";
import countTo from "vue-count-to";
import "echarts-liquidfill";
import {
    DatasetComponent,
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    VisualMapComponent,
    GeoComponent,
    GridComponent,
    LegendComponent,
} from "echarts/components";
import { MapChart, BarChart, PieChart, EffectScatterChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import base from "../assets/JS/base";

echarts.use([
    DatasetComponent,
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    VisualMapComponent,
    GeoComponent,
    MapChart,
    GridComponent,
    BarChart,
    LegendComponent,
    CanvasRenderer,
    LabelLayout,
    PieChart,
    EffectScatterChart,
    GeoComponent
]);
export default {
    name: "dataView",
    data() {
        return {
            dialogVisible: false,
            genderValue: "全部",
            currentTime: this.$base.timeSwitch(new Date(), true),
            menu: [
                {
                    src: require("@/assets/IMAGES/icon_yyl.png"),
                    title: "云养老",
                    subtitle: "Cloud pension",
                    id: 0,
                    // url: "https://test.yyanglao.com/jgadmin/login",
                    url: "yyy"
                },
                {
                    src: require("@/assets/IMAGES/icon_yyy.png"),
                    title: "云医院",
                    subtitle: "Cloud hospital",
                    id: 1,
                    url: "https://hospital.yyanglao.com/pc/#/login"
                },
                {
                    src: require("@/assets/IMAGES/icon_yyf.png"),
                    title: "云药房",
                    subtitle: "Cloud pharmacy",
                    id: 2,
                    url: "yyf"
                }
                // {
                //   src: require("@/assets/IMAGES/icon_gyl.png"),
                //   title: "电商",
                //   subtitle: "Supply chain services",
                //   id: 3,
                //   submenu: [
                //     {
                //       src: require("@/assets/IMAGES/icon_ygyl.png"),
                //       title: "云供应链系统",
                //       subtitle: "Cloud supply chain system",
                //       url: "",
                //     },
                //   ],
                // },
            ],
            provinceData: [
                {
                    name: "新疆",
                    eName: "xinjiang",
                    value: 0,
                },
                {
                    name: "西藏",
                    eName: "xizang",
                    value: 0,
                },
                {
                    name: "内蒙古",
                    eName: "neimenggu",
                    value: 0,

                },
                {
                    name: "青海",
                    eName: "qinghai",
                    value: 0,
                },
                {
                    name: "四川",
                    eName: "sichuan",
                    value: 2,

                },
                {
                    name: "黑龙江",
                    eName: "heilongjiang",
                    value: 0,

                },
                {
                    name: "甘肃",
                    eName: "gansu",
                    value: 0,

                },
                {
                    name: "云南",
                    eName: "yunnan",
                    value: 0,

                },
                {
                    name: "广西",
                    eName: "guangxi",
                    value: 0,

                },
                {
                    name: "湖南",
                    eName: "hunan",
                    value: 0,

                },
                {
                    name: "陕西",
                    eName: "shanxi",
                    value: 0,

                },
                {
                    name: "广东",
                    eName: "guangdong",
                    value: 0,

                },
                {
                    name: "吉林",
                    eName: "jilin",
                    value: 0,

                },
                {
                    name: "河北",
                    eName: "hebei",
                    value: 0,

                },
                {
                    name: "湖北",
                    eName: "hubei",
                    value: 0,

                },
                {
                    name: "贵州",
                    eName: "guizhou",
                    value: 0,

                },
                {
                    name: "山东",
                    eName: "shandong",
                    value: 0,

                },
                {
                    name: "江西",
                    eName: "jiangxi",
                    value: 0,

                },
                {
                    name: "河南",
                    eName: "henan",
                    value: 0,

                },
                {
                    name: "辽宁",
                    eName: "liaoning",
                    value: 0,

                },
                {
                    name: "山西",
                    eName: "shanxi",
                    value: 0,

                },
                {
                    name: "安徽",
                    eName: "anhui",
                    value: 0,

                },
                {
                    name: "福建",
                    eName: "fujian",
                    value: 0,

                },
                {
                    name: "浙江",
                    eName: "zhejiang",
                    value: 12,

                },
                {
                    name: "江苏",
                    eName: "jiangsu",
                    value: 0,

                },
                {
                    name: "重庆",
                    eName: "chongqing",
                    value: 0,

                },
                {
                    name: "宁夏",
                    eName: "ningxia",
                    value: 1,

                },
                {
                    name: "海南",
                    eName: "hainan",
                    value: 0,

                },
                {
                    name: "台湾",
                    eName: "taiwan",
                    value: 0,

                },
                {
                    name: "北京",
                    eName: "beijing",
                    value: 10,

                },
                {
                    name: "天津",
                    eName: "tianjin",
                    value: 0,

                },
                {
                    name: "上海",
                    eName: "shanghai",
                    value: 1,

                },
                {
                    name: "香港",
                    eName: "xianggang",
                    value: 0,
                },
                {
                    name: "澳门",
                    eName: "aomen",
                    value: 0,
                }
            ],
            selectProvice: ['浙江', '上海', '四川', '宁夏'],
            selectData: [],
            isShowAll: false,
            ylyData: [
                {
                    title: "衢江驾驶舱",
                    value: "http://220.191.238.249:8090/web/cockpit/#/saasMiddle?resthome=廿里镇敬老院&resthomeId=resthome671032"
                },
                {
                    title: "衢州驾驶舱",
                    value: "http://220.191.238.9:9080/web/cockpit/#/saasMiddle?resthome=衢州市天颐老人之家&resthomeId=resthome851597"
                },
                {
                    title: "诸暨驾驶舱",
                    value: "http://220.187.226.227/web/cockpit/#/saasMiddle?resthome=诸暨市枫桥镇敬老院&resthomeId=resthome830332"
                },
                {
                    title: "常山驾驶舱",
                    value: "http://220.191.237.199:8980/web/livingCockpit/#/saasMiddle?resthome=天马街道示范型居家养老服务中心&resthomeId=resthome835190"
                },
                {
                    title: "安吉驾驶舱",
                    value: "https://ylxt.vihost.cn/web/cockpit/#/saasMiddle?resthome=安吉县社会福利中心&resthomeId=resthome517750"
                },
            ],
            effectScatterData: [],//点地址
        }
    },
    methods: {
        handleCommand(e) {
            this.genderValue = e;
        },
        selectMenu(e) {
            let url = e.url;
            //云药房
            if (url == "yyf") {
                this.getToken();
            } else if (url == "yyy") {
                //养老大屏
                /*window.open(
                  `http://www.gold-key.com.cn:82/csadmin/#/avoidLogin?username=changshan1&password=123456`
                );*/
                // window.open(
                //     `http://test.yyanglao.com/csadmin/#/avoidLogin?username=changshan1&password=123456`
                // );
                this.dialogVisible = true;
            }
            //外链
            else if (url.includes("http")) {
                let token = JSON.parse(sessionStorage.getItem("loginInfo")).token;
                //location.href = url + `?token=${token}`;
                window.open(url + `?token=${token}`);
            }
        },
        selectAll() {
            this.getMapData('china', chinaJson);
            this.isShowAll = false;
        },
        //跳转
        jumpPage(url) {
            window.open(url);
        },
        //性别占比
        genderPie() {
            var chartDom = document.getElementById("gender-pie");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    formatter: "{a}<br/>{b}<br/>{c}%"
                },
                // color: ["#FFB85D", "#00DCB9", "#9236E9", "#00D1FF"],
                series: [
                    {
                        name: "性别占比",
                        type: "pie",
                        radius: ['50%', '90%'],
                        label: {
                            color: "#fff",
                            fontSize: 12,
                            formatter: "{b}\n{c}%"
                        },
                        data: [
                            { value: 21.89, name: "男" },
                            { value: 32.53, name: "女" },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //来源
        sourceBar() {
            var chartDom = document.getElementById("source-bar");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                color: ["#73c0de"],
                tooltip: {

                },
                // grid: {
                //   x: 28,
                //   y: 40,
                //   y2: 40
                // },


                xAxis: {
                    type: "category",
                    data: ["杭州康久医疗投资管理有限公司",
                        "杭州康久天颐养老院",
                        "杭州拱墅康久天颐护理院",
                        "杭州市拱墅区祥符街道庆隆社区康久天颐养老园",
                        "嘉兴康久中医院有限公司",
                        "衢州康久医院有限公司",
                        "衢州康久第二医院",
                        "衢州市天颐老人之家",
                        "杭州萧山快康医院",
                        "舟山市普陀天颐老人之家",
                        "舟山市普陀康久医院有限公司",
                        "舟山市普陀区六横镇康久居家养老服务中心",
                        "宁波市鸿海医药药材有限公司",
                        "杭州临安赛康医院有限公司",
                        "上海孝信网络科技有限公司",
                        "宁夏石嘴山市康久医院",
                        "宁夏石嘴山市天颐老人之家",
                        "成都同康大药房",
                        "成都市锦江区东光社区卫生服务中心",
                        "杭州医养科技有限公司"],
                    axisLabel: {
                        fontSize: 10,
                        rotate: 60,
                        formatter: function (value) {
                            return `${value.slice(0, 3)}...`;
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    name: "(人)",
                    nameTextStyle: {
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: "来源",
                        data: [1000, 2000, 1200, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 3000, 2000, 2000, 2000, 2000, 2000, 2000, 3000],
                        type: "bar",
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(180, 180, 180, 0.2)"
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //订单
        orderBar() {
            var chartDom = document.getElementById("order-bar");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                color: ["#73c0de"],
                tooltip: {
                    formatter: (e) => {
                        return e.name + '<br>' + '订单金额：' + e.data + '万' + '<br>' + '订单数量：' + e.data + '单'
                    }
                },
                // grid: {
                //   x: 28,
                //   y: 40,
                //   y2: 40
                // },
                xAxis: {
                    type: "category",
                    data: ["杭州康久医疗投资管理有限公司",
                        "杭州康久天颐养老院",
                        "杭州拱墅康久天颐护理院",
                        "杭州市拱墅区祥符街道庆隆社区康久天颐养老园",
                        "嘉兴康久中医院有限公司",
                        "衢州康久医院有限公司",
                        "衢州康久第二医院",
                        "衢州市天颐老人之家",
                        "杭州萧山快康医院",
                        "舟山市普陀天颐老人之家",
                        "舟山市普陀康久医院有限公司",
                        "舟山市普陀区六横镇康久居家养老服务中心",
                        "宁波市鸿海医药药材有限公司",
                        "杭州临安赛康医院有限公司",
                        "上海孝信网络科技有限公司",
                        "宁夏石嘴山市康久医院",
                        "宁夏石嘴山市天颐老人之家",
                        "成都同康大药房",
                        "成都市锦江区东光社区卫生服务中心",
                        "杭州医养科技有限公司"],
                    axisLabel: {
                        fontSize: 10,
                        rotate: 60,
                        formatter: function (value) {
                            return `${value.slice(0, 3)}...`;
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    name: "(万)",
                    nameTextStyle: {
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: "",
                        data: [1000, 2000, 1200, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 3000, 2000, 2000, 2000, 2000, 2000, 2000, 3000],
                        type: "bar",
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(180, 180, 180, 0.2)"
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //订单top5
        orderTop5() {
            var chartDom = document.getElementById('top');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    formatter: function (e) {
                        return `${e.name}<br>${e.data}万`
                    }
                },
                xAxis: {
                    type: 'value',
                    name: "万",
                    axisLabel: {
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ["杭州康久医疗投资管理有限公司",
                        "杭州康久天颐养老院",
                        "杭州拱墅康久天颐护理院",
                        "杭州市拱墅区祥符街道庆隆社区康久天颐养老园",
                        "嘉兴康久中医院有限公司"],
                    axisLabel: {
                        fontSize: 10,
                        rotate: 0,
                        formatter: function (value) {
                            return `${value.slice(0, 2)}...`;
                        }
                    }
                },
                series: [
                    {
                        data: [2000, 1500, 800, 700, 610],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //地图
        drawMap(mapName, dataJson, data) {
            var chartDom = document.getElementById("map-chart");
            var myChart = echarts.init(chartDom);
            myChart.resize();
            var option;
            echarts.registerMap(mapName, dataJson);
            myChart.setOption(
                (option = {
                    tooltip: {},
                    geo: {
                        map: mapName,
                        selectedMode: "multiple",
                        zoom: 1.2,
                        label: {
                            show: true,
                            color: '#999',
                            formatter: e => {
                                if (this.selectData.includes(e.name)) {
                                    return e.name;
                                } else {
                                    return "";
                                }
                            }
                        },
                        itemStyle: {
                            color: '#29243D',
                            borderColor: '#00D1FF'
                        },
                        //高亮
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff'
                            },
                            itemStyle: {
                                areaColor: '#00D1FF',
                                borderColor: '#00D1FF'
                            },
                        },
                        //选中
                        select: {
                            label: {
                                show: true,
                                color: '#fff'
                            },
                            itemStyle: {
                                areaColor: '#00D1FF',
                                borderColor: '#00D1FF'
                            },
                        },
                        //弹窗
                        tooltip: {
                        }
                    },
                    series: [
                        {
                            name: "机构数量",
                            type: 'effectScatter',
                            coordinateSystem: 'geo',//使用地理坐标系
                            selectedMode: "multiple",
                            geoIndex: 0,
                            itemStyle: {
                                color: '#b02a02'
                            },
                            data: this.effectScatterData
                        },
                        {
                            name: "机构数量",
                            type: 'map',
                            selectedMode: "multiple",
                            geoIndex: 0,
                            data: data
                        },
                    ]
                })
            );
            console.log(this.selectData);
            //默认选中
            myChart.dispatchAction({
                type: 'select',
                name: this.selectData
            })

            myChart.on("click", (item) => {
                /*切换省市地图*/
                if (item.data.eName == 'ningxia') {
                    this.selectData = ["石嘴山市"];
                    this.effectScatterData = [[106.376173, 39.01333]]
                    this.getMapData(item.data.eName, ningxiaJson);
                } else if (item.data.eName == 'zhejiang') {
                    this.selectData = ["杭州市", "嘉兴市", "宁波市", "衢州市", "舟山市"];
                    this.getMapData(item.data.eName, zhejiangJson);
                } else if (item.data.eName == 'sichuan') {
                    this.selectData = ["成都市"];
                    this.effectScatterData = [[103.565735, 30.609462], [104.065735, 30.659462]]
                    this.getMapData(item.data.eName, sichuanJson);
                } else if (item.data.eName == 'shanghai') {
                    this.selectData = ["浦东新区"];
                    this.effectScatterData = [[121.7140186,31.1182194 ]]
                    this.getMapData(item.data.eName, shanghaiJson);
                } else {
                    return;
                }

            });
            option && myChart.setOption(option);
        },
        //获取地图数据
        getMapData(eName, dataJson) {
            let data = [];
            if (eName == 'china') {
                this.isShowAll = false;
                this.selectData = this.selectProvice;
                this.effectScatterData = [];
                data = this.provinceData;
            } else {
                this.isShowAll = true;
                let features = dataJson.features;
                for (let index = 0; index < features.length; index++) {
                    let obj = {};
                    obj.name = features[index].properties.name;
                    obj.value = index;
                    data.push(obj);
                };

            }
            this.drawMap(eName, dataJson, data);
        },
        //类型数量
        typeNumPie() {
            var chartDom = document.getElementById("type-num");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    // formatter: "{b}<br/>{c}%"
                },
                // color: ["#FFB85D", "#00DCB9", "#9236E9", "#00D1FF"],
                series: [
                    {
                        name: "类型数量",
                        type: "pie",
                        radius: ['50%', '90%'],
                        label: {
                            color: "#fff",
                            fontSize: 12,
                            // formatter: "{b}\n{c}%"
                        },
                        data: [
                            { value: 11, name: "民非" },
                            { value: 10, name: "私营" },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //区域数量
        areaNumPie() {
            var chartDom = document.getElementById("area-num");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {

                },
                // color: ["#FFB85D", "#00DCB9", "#9236E9", "#00D1FF"],
                series: [
                    {
                        name: "区域机构数量",
                        type: "pie",
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        label: {
                            color: "#fff",
                            fontSize: 12,
                        },
                        data: [
                            { value: 9, name: "东北" },
                            { value: 8, name: "华北" },
                            { value: 7, name: "华中" },
                            { value: 6, name: "华东" },
                            { value: 5, name: "华南" },
                            { value: 4, name: "西北" },
                            { value: 2, name: "西南" },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //岗位结构
        postPie() {
            var chartDom = document.getElementById("post");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {

                },
                // color: ["#FFB85D", "#00DCB9", "#9236E9", "#00D1FF"],
                series: [
                    {
                        name: "岗位结构",
                        type: "pie",
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        label: {
                            color: "#fff",
                            fontSize: 12,
                        },
                        data: [
                            { value: 21, name: "管理人员" },
                            { value: 32, name: "职能人员" },
                            { value: 21, name: "后勤人员" },
                            { value: 32, name: "护工人员" },
                            { value: 21, name: "药技人员" },
                            { value: 32, name: "护士人员" },
                            { value: 21, name: "医生人员" },
                            { value: 32, name: "医技人员" },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //用工结构
        constructionPie() {
            var chartDom = document.getElementById("construction");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {

                },
                // color: ["#FFB85D", "#00DCB9", "#9236E9", "#00D1FF"],
                series: [
                    {
                        name: "用工结构",
                        type: "pie",
                        label: {
                            color: "#fff",
                            fontSize: 12,
                        },
                        data: [
                            { value: 12100, name: "全职" },
                            { value: 32, name: "兼职" },
                            { value: 21, name: "实习" },
                            { value: 15, name: "退休返聘" },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //职称等级
        gradePie() {
            var chartDom = document.getElementById("grade");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {

                },
                // color: ["#FFB85D", "#00DCB9", "#9236E9", "#00D1FF"],
                series: [
                    {
                        name: "职称等级",
                        type: "pie",
                        label: {
                            color: "#fff",
                            fontSize: 12,
                        },
                        data: [
                            { value: 12100, name: "无" },
                            { value: 32, name: "初级" },
                            { value: 21, name: "中级" },
                            { value: 15, name: "高级" },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        }

    },
    created() {

    },
    mounted() {
        setInterval(() => {
            this.currentTime = this.$base.timeSwitch(new Date(), true);
        }, 1000);

        this.$nextTick(() => {
            this.getMapData('china', chinaJson);
            this.genderPie();
            this.sourceBar();
            this.orderBar();
            this.typeNumPie();
            this.areaNumPie();
            this.postPie();
            this.constructionPie();
            this.gradePie();
            this.orderTop5();
        })

    },
}

</script>
<style lang="scss" scoped>
.el-container {
    height: 100vh;
    overflow: hidden;
    background-color: #18142c;
}


.el-header {
    min-height: 8vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #29243d;

    .logo {
        height: 100%;
        padding: 10px 12px;
        box-sizing: border-box;
    }

    .screen-title {
        color: #ffffff;
        margin-right: 12px;

        h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
            text-align: right;
        }

        p {
            font-size: 14px;
            font-family: ArialMT;
            letter-spacing: 1px;
        }
    }
}

.el-main {
    min-height: 60vh;
    overflow: hidden;

    .box-card {
        min-height: 58vh;
    }

    .order {
        min-height: 46.5vh;
    }

    #map-chart {
        min-height: 55vh;
    }

    .gender-down {
        float: right;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #999;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    #gender-pie,
    #order-top {
        height: 20vh;
        width: 100%;
    }

    #source-bar,
    #order-bar {
        height: 30vh;
        width: 100%;
    }

    .menu-box {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }

    .menu-list {
        flex: 1;
        box-sizing: border-box;
        cursor: pointer;
        padding: 17px;
        display: flex;
        flex-direction: column;
        background: #29243d;
        border-radius: 17px;

        .menu-logo {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            box-sizing: border-box;

            img {
                width: 30px;
            }
        }

        .title {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;

            h3 {
                height: 30px;
                font-size: 14px;
                font-weight: 500;
                color: #eee;
                line-height: 30px;
            }
        }

        .go {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            .go-right {
                height: 12px;
                width: 12px;
                padding: 8px;
                background-color: #313131;
                border-radius: 50%;
            }
        }
    }

    .menu-list:nth-child(1),
    .menu-list:nth-child(2) {
        margin-right: 12px;
    }
}

.el-footer {
    min-height: 30vh;

    .box-card {
        min-height: 28vh;
    }

    .organization-info,
    .user-info {
        display: flex;
        align-items: center;

        #type-num,
        #area-num,
        #post,
        #construction,
        #grade {
            min-height: 20vh;
        }

        div {
            flex: 1;
        }
    }
}

.box-card {
    color: #fff;
    border-radius: 8px;
    background: #29243d;
    margin-right: 12px;
    padding: 12px;
    box-sizing: border-box;
}

.title {
    font-weight: bold;
}

.num {
    font-weight: bold;
    color: #00D1FF;
}

.vip-num {
    font-size: 20px;
    margin-left: 20px;
}

#top {
    min-height: 10vh;
}

.select-btn {
    padding: 12px 20px;
    margin-right: 12px;
}
</style>